<template>
  <div class="data-card">
    <div class="card-icon" :style="{ backgroundColor: color }">
      <el-icon :size="24"><component :is="icon" /></el-icon>
    </div>
    <div class="card-content">
      <div class="card-value">{{ formattedValue }}</div>
      <div class="card-label">{{ label }}</div>
    </div>
    <div v-if="trend" class="card-trend" :class="trendClass">
      <el-icon><component :is="trendIcon" /></el-icon>
      <span>{{ trend }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { formatNumber } from '@/utils/format'

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  label: {
    type: String,
    required: true
  },
  value: {
    type: [Number, String],
    required: true
  },
  color: {
    type: String,
    default: '#409EFF'
  },
  trend: {
    type: String,
    default: ''
  },
  trendType: {
    type: String,
    default: 'up' // up or down
  },
  format: {
    type: Boolean,
    default: true
  }
})

const formattedValue = computed(() => {
  if (props.format && typeof props.value === 'number') {
    return formatNumber(props.value)
  }
  return props.value
})

const trendClass = computed(() => {
  return props.trendType === 'up' ? 'trend-up' : 'trend-down'
})

const trendIcon = computed(() => {
  return props.trendType === 'up' ? 'CaretTop' : 'CaretBottom'
})
</script>

<style scoped>
.data-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: var(--bg-card);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}

.data-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-right: 16px;
}

.card-content {
  flex: 1;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.2;
}

.card-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.trend-up {
  color: var(--success);
}

.trend-down {
  color: var(--danger);
}
</style>

